<template>
  
  <div class="fillcontain">
    <bt-col-header title="接口模版"></bt-col-header>
    <!-- <div class="head-title"><i class="el-icon-vwedit">   接口模版</i></div> -->
    <div class="page-content"> 
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
              label-width="80px" class="form-container">

        <el-row class="contain-padding">
          <el-col :span="12">
            <el-form-item label="模版编码" prop="templateCode">
              <el-input v-model="dataForm.templateCode" disabled placeholder="模版编码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="模版名称" prop="templateName">
              <el-input v-model="dataForm.templateName" placeholder="模版名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="contain-padding">
          <el-col :span="12">
            <el-form-item label="所属模型" prop="entityId">
              <el-select v-model="dataForm.entityId" filterable placeholder="请选择">
                <el-option
                  v-for="item in entitys"
                  :key="item.entityId"
                  :label="item.entityName"
                  :value="item.entityId"
                  @click.native="changeEntity(item)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="模板类型" prop="templateType">
              <el-select v-model="dataForm.templateType" filterable placeholder="请选择">
                <el-option
                  v-for="item in templateTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="contain-padding">
          <el-col :span="12">
            <el-form-item label="是否有效" prop="isEffect">
              <el-switch
                v-model="dataForm.isEffect"
                active-color="#13ce66"
                inactive-color="#ff4949"
                on-value="1" on-text="是" off-text="否" off-value="0">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>  
      <bt-col-header title="属性"></bt-col-header>
      <div class="page-content">
        <div class="contain-padding">
          <el-row>
            <el-col :span="24">
              <el-tree
                :data="reqDataList"
                show-checkbox
                node-key="itemId"
                ref="reqTree"
                :props="defaultProps"
                lazy
                :check-strictly="true"
                :default-checked-keys="reqCheckedList"
                :expand-on-click-node="false">
              </el-tree>
            </el-col>
          </el-row>
        </div>
      </div>
      
      <div class="content-footer">
        <el-button :plain="true" type="info" @click="dataFormSubmit()">确定</el-button>
        <el-button @click="toList">取消</el-button>
      </div>
    </div>
  </div>
  <!--  </el-dialog>-->
</template>

<script>
  import {entityList} from '@/api/baseConfig/entity'
  import constant from "../../../../../api/constant";
  import {getData, saveData, getEntityInfo} from '@/api/testCase/interfaceTemplate'

  export default {
    data() {
      return {
        defaultProps: {
          label: function(item){
            return item.itemName + '        ' + item.itemIdentify + '        ' +  item.itemType 
          }
        },
        reqDataList: [],
        reqCheckedList: [],
        loading: false,
        isEdit: false,
        entitys: [],
        templateTypes: constant.ruleConfig.templateTypes,
        dataList: [],
        visible: false,
        dataForm: {
          id: null,
          templateCode: null,
          templateName: '',
          templateType: '',
          entityId: '',
          remark: '',
          isEffect: '1'
        },
        dataRule: {
          // templateCode: [
          //     {required: true, message: '模板编码不能为空', trigger: 'blur'}
          // ],
          templateName: [
            {required: true, message: '模板名称不能为空', trigger: 'change'}
          ],
          templateType: [
            {required: true, message: '模板类型不能为空'}
          ],
          entityId: [
            {required: true, message: '所属模型不能为空'}
          ]
        },

      }
    },
    created() {
      let id = this.$route.params.id
      this.init(id)
    },
    activated() {
      let id = this.$route.params.id
      this.init(id)
    },
    methods: {
      toList() {
        constant.clearTag(this)
        this.$router.push({name: constant.routerName.listInterfaceTemplate})
      },

      // 实体类改变
      changeEntity(item) {
        this.reqDataList = []
        this.getEntityProperties()
      },
      // 获取实体类的属性
      getEntityProperties() {
        let params = {
          id: this.dataForm.entityId + ''
        }
        getEntityInfo(params).then(res => {
          if (res.data.data) {
            this.reqDataList = res.data.data
            this.reqDataList.forEach((item,index) => {
              item.children = [];
              item.childrens = [];
            })
          }
        })
      },
      // 获取实体类的属性
      getEntityPropertiesByEntityId(id) {
        let params = {
          id: id + ''
        }
        getEntityInfo(params).then(res => {
          if (res.data.data) {
            this.reqDataList = res.data.data
          }
        })
      },
      loadNode(node, resolve) {
        if (node.data.itemType === 'List') {
          getEntityInfo({pkgName: node.data.itemCls}).then(res => {
            if (res.data.data) {
              return resolve(res.data.data)
            }
          })
        } else {
          return resolve([])
        }
      },
      init(id) {
        this.visible = true
        this.isEdit = false
        this.reqDataList = []
        this.reqCheckedList = []
        entityList({}).then(res => {

          this.entitys = res.data.data
        })
        this.$nextTick(() => {

          this.$refs['dataForm'].resetFields()
          if (id && id != "undefined") {
            this.dataForm.id = id
            this.isEdit = true
            let params = {
              id: this.dataForm.id + ''
            }
            this.$store.dispatch('loading/CHANGE_LOADING', true)
            getData(params).then(res => {
              this.$store.dispatch('loading/CHANGE_LOADING', false)
              if (res.data.data && res.data.resultCode === 0) {
                this.dataForm = res.data.data.template;
                this.reqDataList = res.data.data.reqDataList
                res.data.data.entities.forEach(item => {
                  this.reqCheckedList.push(item.itemId)
                })
              }
            }).catch(err => {
              this.$store.dispatch('loading/CHANGE_LOADING', false)
            })
          }
        })
      },

      // 表单提交
      dataFormSubmit() {
        let reqCheckedData = this.$refs.reqTree.getCheckedNodes(false, true)
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (reqCheckedData.length <= 0) {
              this.$message.error("请选择属性")
              return false
            }
            let params = {
              reqEntityItems: JSON.stringify(reqCheckedData),
              dataForm: JSON.stringify(this.dataForm)
            }
            this.$store.dispatch('loading/CHANGE_LOADING', true)
            saveData(params).then(res => {
              this.$store.dispatch('loading/CHANGE_LOADING', false)
              if (res.data && res.data.resultCode === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.dataForm = {
                      id: null,
                      interfaceIdentify: null,
                      interfaceName: '',
                      messageName: '',
                      reqContent: '',
                      resContent: '',
                      remark: '',
                      isEffect: '1'
                    }
                    // this.$emit('refreshDataList')
                    this.toList()
                  }

                })
              } else {
                this.$message.error(res.data.resultMsg)
              }
            }).catch(err => {
              this.$store.dispatch('loading/CHANGE_LOADING', false)
            })
          }
        })

      }
    }
  }
</script>

<style lang="scss">
  .title {
    padding: 10px;
    background-color: rgba(248, 248, 248, 1);
    margin-bottom: 10px;
  }

  .el-table__row .el-form-item__content {
    margin-left: 0 !important;
  }

  .el-table__row .el-form-item {
    margin-bottom: 0 !important;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
